<template>
	<view>
		<uni-card style="padding: 0; " v-for="(item, index) in goodsData" :key="index">
			 <image mode='widthFix' style="width: 45%; margin: auto 0;" :src="item.g_img[0] ? item.g_img[0].url : ''"/> <!--mode='widthFix' -->
			<view style="width: 100%; padding: 20rpx; display: flex;flex-direction: column;justify-content: space-between; position: relative;">
				<view style="display: flex;justify-content: space-between; ">
					<view>{{ item.g_name }}</view>
					<label class="checkbox">
						<checkbox value="r2" :checked="item.on" color="#FFCC33" @tap="danx(index)" />
					</label>
				</view>
				<view style="position: absolute; top: -20rpx; right: -10rpx;">
					<uni-icons type="closeempty" size="18" style="color: red;" @tap="dele(item.shopping_cart_id)"></uni-icons>
				</view>
				<view style="display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 20rpx;
				">
					<view style="width: 80%;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -webkit-box-orient: vertical;
                    ">{{ item.g_info }}</view>
            	<uni-number-box :min="1" @change="changeValue($event,item.shopping_cart_id)" style="width: 160rpx;" :value="item.shopping_cart_num"/>
				</view>


				<view style="width: 100%;">
					<view style="color: red; margin: 30rpx 0 0 0px; font-size: 30rpx; font-weight: bold;">
					￥{{ item.g_price * item.shopping_cart_num}}</view>
				</view>
			</view>
		</uni-card>
	</view>

	<view class="b_button">
		<view style="display: flex;">
				<label>
					<checkbox value="r2" :checked="data.qx_r" color="#FFCC33" @tap="quanx()" />全选
				</label>
		</view>
		<view style="display: flex; align-items: center;">
			<view style="margin-right: 20rpx;">
				<text>合计</text>
				<text style="color: red;">￥{{ (data.num).toFixed(2)  }}</text>
			</view>
			<view>
				<button 
				style="border-radius: 20px; background-color: red; color: #fff; width: 160rpx;"
				@tap="payListin()"
				>结算</button>
			</view>
		</view>
	</view>
	<Pay ref="payref"></Pay>
	<!-- 输入框示例 -->
	<uni-popup ref="inputDialog" type="dialog">
			<image src="../../static/zf.jpg" mode=""></image>
			<button style="
			    background: linear-gradient(to left, #FF0000,#ff8800);
			    color: #fff;
			    border-radius: 20px;" @tap="payList">立即支付 ￥{{ (data.num).toFixed(2) }}</button>
	</uni-popup>
</template>
  
  
<script setup lang="ts">
import { ref, reactive, toRefs,watch, computed } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app"
import Pay from "../pay/pay.vue";
import { ShoppingCartListApi, ShoppingCartPutApi,ShoppingCartDeleteApi, productOrderListAddApi } from '../../https/http'
onShow(() => {
	newData()
})
const inputDialog = ref()
const payref = ref()

const data = reactive<{
	buttonGroup: {}[]
	user: string | null
	qx_r: boolean
	num: number
}>({
	user: null,
	num: 0,
	qx_r: false,
	buttonGroup: [{
		text: '加入购物车',
		backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
		color: '#fff'
	},
	{
		text: '立即购买',
		backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
		color: '#fff'
	}
	],
})
const 	goodsData = ref<any>()

onLoad(() => {
	try {
		const user = uni.getStorageSync('d_user');
		const token = uni.getStorageSync('d_token');
		const usern = uni.getStorageSync('d_usern');
		const avatar = uni.getStorageSync('d_avatar');
		if (user&&token&&usern&&avatar){
			data.user = usern
			newData()
		} else {
			uni.redirectTo({
				url:"/pages/login/login"
			})
		}
	} catch (error) {
		console.log(error);
	}
})
const newData = async () => {
	try{
		const res = await ShoppingCartListApi((data.user as string))
		if (res.code == 200) {
			res.data.forEach(e => {
				e.g_img = JSON.parse((e.g_img as any));
				e.on = false
			})
			goodsData.value = res.data
			// console.log(goodsData.value);
		}
		watch(goodsData,(newVal, oldVal) => {
			let x = true
			data.num = 0
			newVal.forEach((e:any,index:number)=>{
				if (!e.on) {
					data.qx_r = false
					x = false
				}else{
					data.num = data.num + goodsData.value[index].g_price*1
				}
				// console.log(x && e.on);
				
				if (newVal.length-1 == index) {
					if (x && e.on) {
						data.qx_r = true
					}
				}
			})
		},{
			deep:true,
		})
	}catch(e){
		console.log("请登录");
	}

}
const quanx = () => {
	if (data.qx_r) {
		goodsData.value.forEach((e: any) => {
			e.on = false
		})
		data.qx_r = false
	}else{
		goodsData.value.forEach((e: any) => {
			e.on = true
		})
		data.qx_r = true
	}
	// console.log(goodsData.value[0]);
	
}
const danx = (index: number) => {
	let s = !goodsData.value[index].on
	goodsData.value[index].on = s
	// console.log(goodsData.value[index].on);

}
const changeValue = async(value:number,shopping_cart_id:number) => {
	try {
		await ShoppingCartPutApi(shopping_cart_id,{shopping_cart_num:value})
		newData()
	} catch (error) {
		console.log(error);
	}
	
}
const dele = async(shopping_cart_id:number) => {
	console.log(shopping_cart_id);
	try {
		const res = await ShoppingCartDeleteApi(shopping_cart_id)
		if (res.code == 200) {
			newData()
		}

	} catch (error) {
		console.log(error);
	}
}
const payListin = () => {
	if(data.num !==0)inputDialog.value.open()
}
const payList = async() => {
	console.log(goodsData.value);
	let newList:any = []
	goodsData.value.forEach((item:any) => {
		let newObj = {}
		if (item.on) {
			newObj = {
				shopping_cart_id:item.shopping_cart_id,
				good_id: item.g_id,
				product_order_num:item.shopping_cart_num,
				product_order_money:item.g_price * item.shopping_cart_num,
				product_order_state:1
			}
			newList.push(newObj)
		}
	})
    payref.value.pay(data.user)
	inputDialog.value.close()
	const res = await productOrderListAddApi(data.user as string,newList)
	if (res.code == 200) {
		setTimeout(()=>{
			payref.value.payClose()
			newData()
		},3000)
	}
}
// const { } = toRefs(data)
</script>

<style lang="scss">
	.b_button{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 5%;
		position: fixed;
		width: 90%;
		/* #ifdef H5 */
		bottom: 100rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN*/
		bottom: 0rpx;
		/* #endif */
	}
::v-deep.uni-card__content {
	display: flex;
}
</style>
